import { defineStore } from 'pinia'

const defaultThemeColor = 'hsla(222, 60%, 20%, 1)'

const settingInfo = localStorage.getItem('settingInfo')
  ? JSON.parse(localStorage.getItem('settingInfo'))
  : {
      layoutType: '布局1',
      themeColor: defaultThemeColor
    }

export const useSettingStore = defineStore('setting', {
  state: () => Object.assign({ defaultThemeColor }, settingInfo),
  getters: {
    getState(state) {
      return state
    }
  },
  actions: {
    changeLayoutType() {
      localStorage.setItem(
        'settingInfo',
        JSON.stringify({
          layoutType: this.layoutType,
          themeColor: this.themeColor
        })
      )
    },
    changeThemeColor() {
      if (!this.themeColor) return false
      localStorage.setItem(
        'settingInfo',
        JSON.stringify({
          layoutType: this.layoutType,
          themeColor: this.themeColor
        })
      )
      const el = document.documentElement

      let match
      if (this.themeColor.startsWith('hsla')) {
        match = this.themeColor.match(/hsla\((\d+), (\d+)%, (\d+)%, (\d(?:.\d+)?)\)/)
      } else match = this.themeColor.match(/hsl\((\d+) (\d+)% (\d+)% \/ (\d(?:.\d+)?)\)/)

      const h = match[1]
      const s = match[2]
      const l = match[3]
      const a = match[4]

      function computeLight(l, d) {
        const surplus = 100 - l
        const plus = surplus * d

        return Math.floor(+l + plus)
      }

      getComputedStyle(el).getPropertyValue(`--el-color-primary`)

      const setColorVar = () => {
        el.style.setProperty('--el-color-primary', this.themeColor)
        el.style.setProperty(
          '--el-color-primary-light-3',
          `hsl(${h} ${s}% ${computeLight(l, 0.3)}% / ${a})`
        )
        el.style.setProperty(
          '--el-color-primary-light-5',
          `hsl(${h} ${s}% ${computeLight(l, 0.5)}% / ${a})`
        )
        el.style.setProperty(
          '--el-color-primary-light-7',
          `hsl(${h} ${s}% ${computeLight(l, 0.7)}% / ${a})`
        )
        el.style.setProperty(
          '--el-color-primary-light-8',
          `hsl(${h} ${s}% ${computeLight(l, 0.8)}% / ${a})`
        )
        el.style.setProperty(
          '--el-color-primary-light-9',
          `hsl(${h} ${s}% ${computeLight(l, 0.9)}% / ${a})`
        )
      }

      // 过渡效果
      // 开始一次视图过渡：
      const mX = 10
      const mY = 10
      const x = mX ?? innerWidth / 2
      const y = mY ?? innerHeight / 2
      // 获取到最远角的距离
      const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
      const doc: any = document

      // 不支持ViewTransition的情况
      if (!doc.startViewTransition) {
        setColorVar()
        return
      }

      const transition = doc.startViewTransition(() => {
        setColorVar()
      })

      // 等待伪元素创建完成：
      transition.ready.then(() => {
        // 新视图的根元素动画
        document.documentElement.animate(
          {
            clipPath: [`circle(0 at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
          },
          {
            duration: 1000,
            easing: 'ease-in',
            iterations: 1,
            // 指定要附加动画的伪元素
            pseudoElement: '::view-transition-new(root)'
          }
        )
      })
    }
  }
})
